<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>用户列表</title>

    <link rel="stylesheet" href="../layui/css/layui.css">
    <link rel="stylesheet" href="css/manage.css">

    <style>
        /*设置表格表头字体样式*/
        .layui-table th {
            /*表头内容居中显示*/
            text-align: center;
            /*字体加粗*/
            font-weight: bold;
        }

        /*设置表格宽度*/
        .layui-table {
            width: 98%;
        }

        /*设置鼠标经过图标变色*/
        .layui-icon:hover {
            color: red;
        }

        /*搜索框*/
        .search {
            display: inline-block;
            height: 40px;
            line-height: 1.2;
            width: 220px;
            padding: 0 40px 0 20px;
            border: 1px solid #ccc;
            font-size: 14px;
            border-radius: 30px;
            background-color: #faf8fa;
            overflow: hidden;
            color: #333;
            margin-left: 10px;

        }

        /*搜索按钮*/
        .sub {
            display: inline-block;
            position: absolute;
            left: 251px;
            top: 21px;
            height: 40px;
            width: 40px;
            background-color: #cccccc;
            border-radius: 30px;
            background-image: url('images/query.png');
            cursor: pointer;
            border: none;
        }

        .sub:hover {
            background-color: #6699FF;
        }

        /* 解决使用Vue.js页面加载数据的时候，页面闪现原始代码 */
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
    <div id="user-list" v-cloak>
        <div style="margin-top:20px;">
            <div style="display:inline-block;">
                <form>
                    <input type="text" id="cond" value="" required placeholder="寻找用户" class="search">
                    <input class="sub" type="button" value="" @click="selectByLike">

                </form>
            </div>
        </div><br />



        <table class="layui-table">

            <thead>
                <tr>
                    <th>ID</th>
                    <th>用户名</th>
                    <th>用户头像</th>
                    <th>性别</th>
                    <th>联系电话</th>
                    <th>加入时间</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>
            </thead>

            <tbody>
                <tr align="center" v-for="(u,i) in users" :key="i">
                    <td>{{u.userId}}</td>
                    <td>{{u.userName}}</td>
                    <td width="100px"><img id="imgName" style="border-radius: 50%;" width="50px" height="50px" class="picture-thumb"
                            v-bind:src="'../home/images/'+u.image"></td>
                    <td>{{u.sex}}</td>
                    <td>{{u.phone}}</td>
                    <td>{{u.registerTime}}</td>
                    <td>{{u.status==1?'正常':'冻结'}}</td>
                    <td>
                        <a><i class="layui-icon" style="font-size: 18px;"
                                title="冻结" v-if="u.status==1" @click="dongjie(u.userId)">&#xe673;</i></a>
                        <a><i class="layui-icon" style="font-size: 18px;"
                            title="解封" v-if="u.status==2" @click="jiefeng(u.userId)">&#xe672;</i></a>
                      
                    </td>
                </tr>

                <tr v-if="users==null || users.length==0">
                    <td colspan="8" align="center">无数据</td>
                </tr>

            </tbody>

        </table>

    </div>

    <script src="../js/jquery-1.12.4.min.js"></script>
    <script src="../js/Vue.js"></script>
    <script src="../layer/layer.js"></script>
    <script src="../layui/layui.js"></script>
    <script src="js/manage-user.js"></script>
</body>
</html>